<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记录时间 - 嘀嗒</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary': '#10B981',
                        'primary-focus': '#059669',
                        'secondary': '#6366F1',
                        'secondary-focus': '#4F46E5',
                        'accent': '#EC4899',
                        'base-100-light': '#FFFFFF',
                        'base-content-light': '#1F2937',
                        'neutral-light': '#F3F4F6',
                        'text-muted-light': '#6B7280',
                        'border-light': '#E5E7EB'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #FFFFFF; 
            color: #1F2937; 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            display: flex;
            flex-direction: column;
            height: 100vh; 
        }
        .input-group label {
            color: #374151; /* gray-700 */
        }
        .input-field {
            background-color: #F9FAFB; /* gray-50 */
            border: 1px solid #E5E7EB; /* border-light */
            color: #1F2937; /* base-content-light */
        }
        .input-field:focus {
            border-color: #10B981; /* primary */
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
        }
        .tab-button.active {
            border-color: #10B981; /* primary */
            background-color: #D1FAE5; /* primary-lightest / green-100 */
            color: #065F46; /* primary-darker / green-700 */
        }
        .tab-button {
            border: 1px solid #E5E7EB; /* border-light */
        }
    </style>
</head>
<body class="antialiased flex flex-col bg-base-100-light text-base-content-light">

    <header class="p-4 sticky top-0 bg-base-100-light z-10 shadow-sm border-b border-border-light">
        <div class="flex items-center">
            <button onclick="history.back()" class="text-text-muted-light hover:text-primary mr-3">
                <i class="fas fa-arrow-left text-xl"></i>
            </button>
            <h1 class="text-xl font-semibold text-base-content-light">记录时间投入</h1>
        </div>
    </header>

    <main class="flex-grow p-4 overflow-y-auto">
        <div class="mb-4">
            <div class="flex border-b border-border-light">
                <button id="tabManual" class="tab-button active flex-1 py-3 px-4 text-center font-medium rounded-tl-md" onclick="showTab('manual')">手动记录</button>
                <button id="tabTimer" class="tab-button flex-1 py-3 px-4 text-center font-medium rounded-tr-md" onclick="showTab('timer')">计时器</button>
            </div>
        </div>

        <!-- Manual Record Tab -->
        <div id="manualMode">
            <form class="space-y-5">
                <div class="input-group">
                    <label for="activityCategoryManual" class="block text-sm font-medium mb-1">活动分类</label>
                    <select id="activityCategoryManual" name="activityCategoryManual" class="input-field w-full p-3 rounded-md">
                        <option>工作 - 项目A</option>
                        <option>学习 - 专业课程</option>
                        <option>运动 - 健身房</option>
                        <option>通勤</option>
                        <option>家务</option>
                        <option>娱乐 - 看电影</option>
                        <option value="new">+ 新建分类</option>
                    </select>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="input-group">
                        <label for="startTime" class="block text-sm font-medium mb-1">开始时间</label>
                        <input type="datetime-local" id="startTime" name="startTime" class="input-field w-full p-3 rounded-md">
                    </div>
                    <div class="input-group">
                        <label for="endTime" class="block text-sm font-medium mb-1">结束时间</label>
                        <input type="datetime-local" id="endTime" name="endTime" class="input-field w-full p-3 rounded-md">
                    </div>
                </div>
                <div class="input-group">
                    <label for="durationManual" class="block text-sm font-medium mb-1">时长 (可选, 自动计算)</label>
                    <input type="text" id="durationManual" name="durationManual" placeholder="例如: 1h 30m" class="input-field w-full p-3 rounded-md bg-neutral-light" readonly>
                </div>

                <div class="input-group">
                    <label for="notesManual" class="block text-sm font-medium mb-1">备注 (可选)</label>
                    <textarea id="notesManual" name="notesManual" rows="3" placeholder="记录一些细节..." class="input-field w-full p-3 rounded-md"></textarea>
                </div>

                <button type="submit" class="w-full bg-primary hover:bg-primary-focus text-white font-semibold py-3 px-4 rounded-md shadow-md transition duration-150">
                    保存记录
                </button>
            </form>
        </div>

        <!-- Timer Record Tab -->
        <div id="timerMode" class="hidden">
            <div class="space-y-5 text-center">
                <div class="input-group">
                    <label for="activityCategoryTimer" class="block text-sm font-medium mb-1">活动分类</label>
                    <select id="activityCategoryTimer" name="activityCategoryTimer" class="input-field w-full p-3 rounded-md mb-6">
                        <option>工作 - 项目B</option>
                        <option>阅读</option>
                        <option>冥想</option>
                        <option value="new">+ 新建分类</option>
                    </select>
                </div>

                <div id="timerDisplay" class="text-5xl font-bold text-base-content-light my-8">00:00:00</div>

                <div id="timerControls" class="flex justify-center space-x-4">
                    <button id="startTimerBtn" class="bg-primary hover:bg-primary-focus text-white font-semibold py-3 px-6 rounded-md shadow-md transition duration-150 flex items-center">
                        <i class="fas fa-play mr-2"></i> 开始
                    </button>
                    <button id="pauseTimerBtn" class="hidden bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 px-6 rounded-md shadow-md transition duration-150 flex items-center">
                        <i class="fas fa-pause mr-2"></i> 暂停
                    </button>
                    <button id="stopTimerBtn" class="hidden bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-6 rounded-md shadow-md transition duration-150 flex items-center">
                        <i class="fas fa-stop mr-2"></i> 结束并保存
                    </button>
                </div>
                 <div class="input-group mt-6">
                    <label for="notesTimer" class="block text-sm font-medium mb-1">备注 (可选, 计时结束后填写)</label>
                    <textarea id="notesTimer" name="notesTimer" rows="2" placeholder="计时结束后添加备注..." class="input-field w-full p-3 rounded-md"></textarea>
                </div>
            </div>
        </div>
    </main>

    <!-- Modal for creating new category -->
    <div id="newCategoryModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center hidden z-50">
        <div class="relative p-5 border w-11/12 max-w-md shadow-lg rounded-md bg-base-100-light">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-base-content-light">创建新活动分类</h3>
                <button id="closeModalBtn" class="text-text-muted-light hover:text-gray-900">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div class="mt-2 space-y-3">
                <div>
                    <label for="newCategoryName" class="block text-sm font-medium text-gray-700 mb-1">分类名称</label>
                    <input type="text" id="newCategoryName" name="newCategoryName" class="input-field w-full p-3 rounded-md" placeholder="例如：学习 - 英语">
                </div>
                <div>
                    <label for="newCategoryColor" class="block text-sm font-medium text-gray-700 mb-1">分类颜色 (可选)</label>
                    <input type="color" id="newCategoryColor" name="newCategoryColor" class="input-field w-full p-1 h-10 rounded-md" value="#10B981">
                </div>
                <div class="flex justify-end space-x-2 pt-3">
                    <button id="cancelNewCategoryBtn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition">取消</button>
                    <button id="saveNewCategoryBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-focus transition">保存分类</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const tabManual = document.getElementById('tabManual');
        const tabTimer = document.getElementById('tabTimer');
        const manualMode = document.getElementById('manualMode');
        const timerMode = document.getElementById('timerMode');

        function showTab(mode) {
            if (mode === 'manual') {
                manualMode.classList.remove('hidden');
                timerMode.classList.add('hidden');
                tabManual.classList.add('active');
                tabTimer.classList.remove('active');
            } else {
                manualMode.classList.add('hidden');
                timerMode.classList.remove('hidden');
                tabManual.classList.remove('active');
                tabTimer.classList.add('active');
            }
        }

        // Timer Logic (Simplified)
        const timerDisplay = document.getElementById('timerDisplay');
        const startTimerBtn = document.getElementById('startTimerBtn');
        const pauseTimerBtn = document.getElementById('pauseTimerBtn');
        const stopTimerBtn = document.getElementById('stopTimerBtn');
        let timerInterval;
        let seconds = 0;
        let timerRunning = false;

        function formatTime(totalSeconds) {
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const secs = totalSeconds % 60;
            return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
        }

        startTimerBtn.addEventListener('click', () => {
            if (!timerRunning) {
                timerRunning = true;
                timerInterval = setInterval(() => {
                    seconds++;
                    timerDisplay.textContent = formatTime(seconds);
                }, 1000);
                startTimerBtn.classList.add('hidden');
                pauseTimerBtn.classList.remove('hidden');
                stopTimerBtn.classList.remove('hidden');
            }
        });

        pauseTimerBtn.addEventListener('click', () => {
            if (timerRunning) {
                clearInterval(timerInterval);
                timerRunning = false;
                pauseTimerBtn.innerHTML = '<i class="fas fa-play mr-2"></i> 继续';
            } else {
                timerRunning = true;
                 timerInterval = setInterval(() => {
                    seconds++;
                    timerDisplay.textContent = formatTime(seconds);
                }, 1000);
                pauseTimerBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> 暂停';
            }
        });

        stopTimerBtn.addEventListener('click', () => {
            clearInterval(timerInterval);
            timerRunning = false;
            // Here you would typically save the timed activity
            alert(`活动已记录: ${document.getElementById('activityCategoryTimer').value} - ${formatTime(seconds)}`);
            seconds = 0;
            timerDisplay.textContent = formatTime(seconds);
            startTimerBtn.classList.remove('hidden');
            pauseTimerBtn.classList.add('hidden');
            pauseTimerBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> 暂停';
            stopTimerBtn.classList.add('hidden');
        });

        // Calculate duration for manual entry
        const startTimeInput = document.getElementById('startTime');
        const endTimeInput = document.getElementById('endTime');
        const durationManualInput = document.getElementById('durationManual');

        function calculateDuration() {
            if (startTimeInput.value && endTimeInput.value) {
                const start = new Date(startTimeInput.value);
                const end = new Date(endTimeInput.value);
                if (end > start) {
                    let diffMs = end - start;
                    let diffHrs = Math.floor(diffMs / 3600000); // hours
                    diffMs %= 3600000;
                    let diffMins = Math.floor(diffMs / 60000); // minutes
                    durationManualInput.value = `${diffHrs}小时 ${diffMins}分钟`;
                } else {
                    durationManualInput.value = "结束时间需晚于开始时间";
                }
            } else {
                durationManualInput.value = "";
            }
        }
        startTimeInput.addEventListener('change', calculateDuration);
        endTimeInput.addEventListener('change', calculateDuration);

    </script>

</body>
</html>